<template>
  <div class="container">
    <ul>
      <li>
        <router-link to="/coding"><img class="index-img" src="https://songsutiku-bucket.oss-cn-hangzhou.aliyuncs.com/yuncoding/web/img/banner.5a4f5a2.png" alt="主页"></router-link>
      </li>
      <li>
        <img src="https://songsutiku-bucket.oss-cn-hangzhou.aliyuncs.com/yuncoding/web/img/QQ.c82c702.png" class="qq">
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.index-img {
  max-width: 100%;
  height: auto;
  transform: scale(1.2)
}
</style>
